<!--
 * @FilePath: SchoolPhoneCall.vue
 * @Author: jack
 * @Date: 2024-07-30 17:09:03
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-07 10:20:00
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div :style="'width: 100%;height:' + centerTableHeight + 'px;'">

        <div class="tabBox" ref="centerTabRef2">
            <el-radio-group size="small" v-model="activeName" @change="selectActive">
                <el-radio-button label="1">列表</el-radio-button>
                <el-radio-button label="2">图表</el-radio-button>
            </el-radio-group>
        </div>
        <div style="position: relative;">
            <div class="loading-flex-box" v-show="lodding">
                <dv-loading>加载中...</dv-loading>
            </div>
            <el-table v-if="activeName == '1' && centerTabHeight != 0" :data="tableData2" size="small" :border="false"
                :height="Number(centerTableHeight) - Number(centerTabHeight)"
                style="width: 100%;background: transparent;" :header-cell-style="headerCellstyle" stripe
                class="elTable">
                <el-table-column prop="schoolName" show-overflow-tooltip label="学校" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.schoolName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="trunkPhone" show-overflow-tooltip label="号码" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.trunkPhone }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="deviceId" show-overflow-tooltip label="设备ID" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.deviceId }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="yysName" show-overflow-tooltip label="运营商" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.yysName ? scope.row.yysName : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="art_title" width="60" show-overflow-tooltip label="厂商" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.vendorName ? scope.row.vendorName : '-' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="successCount" sortable show-overflow-tooltip label="通话次数" align="center">
                    <template v-slot="scope">
                        <span style="color: #16F5FF;">{{ scope.row.successCount }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="callSecond" sortable show-overflow-tooltip label="通话时长" align="center">
                    <template v-slot="scope">
                        <span>{{ $util.formatSeconds(scope.row.callSecond) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="phoneName" width="130" show-overflow-tooltip label="位置" align="center">
                    <template v-slot="scope">
                        <span>{{ scope.row.phoneName ? scope.row.phoneName : '-' }}</span>
                    </template>
                </el-table-column>
                <template slot="empty" v-if="isNodata">
                    <NoDate title=" 暂无数据"></NoDate>
                </template>
            </el-table>
            <div class="chartBox" v-if="activeName == '2'"
                :style="'height:' + (Number(centerTableHeight) - Number(centerTabHeight)) + 'px;'">
                <LineCharts ref="LineChartsRef" :chartData="chartData"></LineCharts>
            </div>
        </div>

    </div>
</template>
<script>
import LineCharts from './LineCharts.vue'
// 引入防抖函数
import utils from '../util/debounce.js'
export default {
    name: 'SchoolPhoneCall',
    components: {
        LineCharts
    },
    props: {
        schoolList: {
            type: Array,
            default: []
        },
        centerTableHeight: {
            type: Number,
            default: 0
        },
        personQuery: {
            type: Object,
            default: {}
        },
        moduleIndex: {
            type: Number,
            default: 1
        },
    },
    data() {
        return {
            lodding: false,
            centerTabHeight: 0,
            tableData2: [],
            activeName: '1',
            chartData: [],
            isNodata: true,
        }
    },
    watch: {
        schoolList: {
            async handler(newVal) {
                if (newVal.length > 0) {
                    this.getTerminals()
                }
            }
        },
        moduleIndex: {
            async handler(newVal) {
                if (Number(this.activeName) === 2 && Number(this.moduleIndex) === 1) {
                    this.$emit('setCanSelectSchoolStatus', false)
                } else {
                    this.$emit('setCanSelectSchoolStatus', true)
                }
            }
        },
    },
    methods: {
        // 单元格表头的设置
        headerCellstyle({ row, column, rowIndex, columnIndex }) {
            return 'background:#082667!important;color: #FFFFFF;font-size: 12px;'
        },
        async selectActive(val) {
            if (Number(val) === 2) {
                await this.getChartData()
                this.$emit('setCanSelectSchoolStatus', false)
            } else {
                this.getTerminals()
                this.$emit('setCanSelectSchoolStatus', true)
            }
            // setTimeout(() => {
            //     this.getHeight()
            // }, 0)

        },
        // 获取图表数据
        async getChartData() {
            this.lodding = true
            const params = {
                yys: this.personQuery.yys,
                linkType: this.personQuery.linkType,
                vendor: this.personQuery.vendor,
                startDay: this.personQuery.startDay,
                endDay: this.personQuery.endDay,
                period: this.personQuery.periodStart && this.personQuery.periodEnd ? this.personQuery.periodStart + '-' + this.personQuery.periodEnd : '',
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/querySchoolPhoneCallAll', {
                params: params
            })
            this.chartData = res.data
            this.lodding = false
        },
        // 获取学校通话量列表数据
        async getTerminals() {
            this.lodding = true
            const params = {
                yys: this.personQuery.yys,
                linkType: this.personQuery.linkType,
                school: this.personQuery.school,
                vendor: this.personQuery.vendor,
                startDay: this.personQuery.startDay,
                endDay: this.personQuery.endDay,
                period: this.personQuery.periodStart && this.personQuery.periodEnd ? this.personQuery.periodStart + '-' + this.personQuery.periodEnd : '',
            }
            const { data: res } = await this.$http.get('/TalkScreen/Api/HlPhone/querySchoolPhoneCall', {
                params: params
            })
            this.tableData2 = res.data
            this.tableData2.forEach(item => {
                item.successCount = Number(item.successCount)
                item.callSecond = Number(item.callSecond)
            });
            this.isNodata = res.data.length > 0 ? false : true
            this.lodding = false
        },
    },
    mounted() {
        this.centerTabHeight = this.$refs.centerTabRef2.clientHeight
    }
}
</script>
<style lang="less" scoped></style>
